<template>
  <div class="dashboard">
    <el-container>
      <el-header>
        <div class="left">
          <img src="https://static01.teamcode.com/upload/3c6f438c0b76/a6cded4f-f282-4f80-befe-1ec5e41a8b11.jpg?x-oss-process=image/resize,m_fill,w_600"/>
          <span style="font-size: 16px">✓</span>
        </div>
        <div class="right">
          <el-input v-model="input2" class="w-50 m-2" placeholder="搜索您的项目" :prefix-icon="Search">
            <template #prefix>
              <el-icon class="el-icon--left">
                <Search />
              </el-icon>
            </template>
          </el-input>
          <button class="create-project" @click="createProVisible = true">+ 新建项目</button>
        </div>
      </el-header>

      <el-container>
        <el-aside width="280px">
          <el-card class="box-card">
            <div class="items" :class="active == '/my-project' ? 'items-active' : ''" @click="toMyProject">
              <div>
                <img src="https://lightly.teamcode.com/assets/icon-folder-highlight.df7f62bb.png"/>
              </div>
              <div>我的项目</div>
            </div>
            <div class="items" :class="active == '/cloud-server' ? 'items-active' : ''" @click="toCloudServer">
              <div>
                <img src="https://lightly.teamcode.com/assets/icon-service.7b386e13.png"/>
              </div>
              <div>云端服务</div>
            </div>

            <hr/>
            <div class="footer">
              <div class="footer-items">
                <div>订阅</div>
                <div>免费版</div>
              </div>

              <div class="footer-items">
                <div>存储空间</div>
                <div>50M/500M</div>
              </div>

              <div class="footer-items">
                <el-progress :show-text="false" :stroke-width="3" :percentage="10" />
              </div>
            </div>
          </el-card>
        </el-aside>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog width="45%" v-model="createProVisible" title="新建项目" center>
      <div class="main">
        <div class="left">
          <p>模板</p>
          <div :class="item.id == activeInfo.langId ? 'lang-item-active' : 'lang-item'" 
            @click="selectLang(item)" 
            v-for="item in langInfo" :key="item.id">
            <div class="lang-icon">
              <img :src="item.icon"/>
            </div>
            <div class="lang-name">{{item.lang}}</div>
          </div>
        </div>

        <div class="right">
          <el-form :model="createProjectInfo" label-width="120px">
            <el-form-item style="margin-top: 30px" label="项目名称">
              <el-input v-model="createProjectInfo.projectName" />
            </el-form-item>

            <el-form-item :label="activeInfo.lang + '版本'">
              <el-select v-model="createProjectInfo.langVersionId" placeholder="未选择">
                <el-option v-for="item in activeInfo.langVersionIds"
                  :key="item.id" 
                  :label="item.version"
                  :value="item.id" />
              </el-select>
            </el-form-item>

            <el-form-item label="依赖管理" v-show="buildToolVisible">
              <el-select v-model="createProjectInfo.buildToolId" placeholder="无">
                <el-option label="无" value="0"/>
                <el-option v-for="item in buildTools" 
                  :label="item.tool" 
                  :key="item.id" 
                  :value="item.id" />
              </el-select>
            </el-form-item>

            <el-form-item label="工作目录">
              <el-input v-model="workDir" disabled/>
            </el-form-item>

            <!-- 只有maven项目才会显示这个折叠框 -->
            <el-collapse v-show="activeInfo.langId == 1 && createProjectInfo.buildToolId == 1"
              v-model="activeNames" 
              @change="collapseChange">
              <el-collapse-item title="Artifact Coordinates" name="1">
                <el-form-item label="Group ID">
                  <el-input disabled v-model="createProjectInfo.groupId" />
                </el-form-item>

                <el-form-item label="Artifact ID">
                  <el-input v-model="createProjectInfo.artifactId" />
                </el-form-item>

                <el-form-item label="Version">
                  <el-input v-model="createProjectInfo.version" />
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </div>
      <div class="operation">
        <div>
          <button class="cancel">取消</button>
        </div>
        <div>
          <button @click="create" class="create">新建项目</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { defineComponent, reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'

import { selectLangAll, selectBuildTools, createProject } from "@/api/index"

import { ElMessage } from 'element-plus'
import bus from '../../config/bus'

export default defineComponent({
  name: "dashboard",

  components: {
    Search
  },

  setup() {
    //工作目录
    const workDir = ref('/workspace/')

    //依赖管理是否显示
    const buildToolVisible = ref(true)

    //当前选中的信息
    const activeInfo = reactive({
      langId: 1,
      lang: 'Java',
      langVersionIds: []
    })

    //创建项目的信息
    const createProjectInfo = reactive({
      langId: 1,
      projectName: '',
      langVersionId: null,
      buildToolId: '无',
      groupId: 'com.example',
      artifactId: '',
      version: '1.0.0-SNAPSHOT'
    })

    //语言相关
    const langInfo = ref([])

    //构建工具相关
    const buildTools = ref([])

    //是否显示创建项目的选项框
    const createProVisible = ref(false)
    
    const router = useRouter()
    const route = useRoute()
    const active = ref(route.path)

    //collapse改变
    const collapseChange = () => createProjectInfo.artifactId = createProjectInfo.projectName

    //确认创建项目
    const create = () => {
      //参数校验
      if (createProjectInfo.projectName.length == 0 || createProjectInfo.langVersionId == null) {
        ElMessage.warning('参数不完整')
        return
      }
      //如果确定是Java Maven项目，则需要验证坐标信息
      if (createProjectInfo.langId == 1 && createProjectInfo.buildToolId == 1) {
        if (createProjectInfo.groupId.length == 0 || createProjectInfo.artifactId.length == 0 || createProjectInfo.version.length == 0) {
          ElMessage.warning('参数不完整')
          return
        }
      }
      if (createProjectInfo.buildToolId == '无' || createProjectInfo.buildToolId == 0) {
        createProjectInfo.buildToolId = null
      }
      createProject(createProjectInfo.langId, createProjectInfo.langVersionId, createProjectInfo.buildToolId, createProjectInfo.projectName, createProjectInfo.groupId
        , createProjectInfo.artifactId, createProjectInfo.version)
        .then(res => {
          if (res.code == 0) {
            //创建成功，将内容追加到展示
            ElMessage.success('创建成功')
            createProjectInfo.projectName = ''
            createProVisible.value = false
            bus.emit('createProjectSuccess', res.data)
            console.log(res)
          } else {
            ElMessage.error(res.msg)
          }
        })
    }

    //选中某种语言
    const selectLang = (item) => {
      buildToolVisible.value = item.id == 1
      activeInfo.langId = item.id
      activeInfo.langVersionIds = item.languageVersions
      activeInfo.lang = item.lang

      createProjectInfo.langId = item.id
      createProjectInfo.projectName = ''
      createProjectInfo.langVersionId = null
      createProjectInfo.buildToolId = '无'
    }

    //初始化
    const init = () => {
      //查询语言
      selectLangAll().then(res => {
        if (res.code == 0) {
          langInfo.value = res.data
          let defaultActive = langInfo.value.filter(item => item.lang == 'Java')[0]
          activeInfo.langId = defaultActive.id
          activeInfo.langVersionIds = defaultActive.languageVersions
        }
      })
      //查询依赖管理工具
      selectBuildTools().then(res => {
        if (res.code == 0) {
          buildTools.value = res.data
        }
      })
    }

    watch(createProjectInfo, val => workDir.value = '/workspace/' + val.projectName, { deep: true })

    init()

    const toMyProject = () => router.replace('/my-project')

    const toCloudServer = () => router.replace('/cloud-server')

    watch(() => router.currentRoute.value.path, newValue => active.value = newValue, { immediate: true })
    return {
      active,
      toMyProject,
      toCloudServer,
      createProVisible,
      langInfo,
      selectLang,
      createProjectInfo,
      activeInfo,
      buildTools,
      workDir,
      buildToolVisible,
      create,
      collapseChange
    }
  },
})
</script>

<style lang="scss">
.dashboard {

  .el-dialog {
    border-radius: 20px;

    .el-dialog__header {
      border-bottom: 1px solid #DCDCDC;
      margin: 0;
    }

    .el-dialog__body {
      padding: 0;

      .main {
        display: flex;

        .left {
          padding: 20px;
          width: 170px;
          border-right: 1px solid #DCDCDC;

          p {
            font-size: 13px;
            margin-bottom: 20px;
          }

          img {
            width: 24;
            height: 20px;
            margin-top: 5px;
          }

          .lang-item, .lang-item-active {
            padding-left: 10px;
            display: flex;
            margin-top: 5px;
            width: 130px;
            height: 30px;
            border-radius: 5px;
            cursor: pointer;
          }

          .lang-item-active {
            background-color: #E8E8E8;
          }

          .lang-item:hover {
            background-color: #E8E8E8;
          }

          .lang-name {
            font-size: 12px;
            line-height: 30px;
            margin-left: 8px;
          }
        }

        .right {

          .el-form-item__label {
            font-size: 12px;
            color: #515968;
            padding-right: 40px;
          }

          .el-collapse {
            margin-left: 35px;

            .el-collapse-item__header {
              color: #515968;
            }
          }
        }
      }

      .operation {
        width: 100%;
        height: 70px;
        background-color: #F1F1F2;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;

        display: flex;
        justify-content: flex-end;

        .cancel, .create {
          border-radius: 5px;
        }

        .cancel {
          margin-top: 20px;
          width: 75px;
          height: 30px;
          background-color: #F1F1F2;
          border: 1px solid #E1E1E2;
          color: #474F6E;
        }

        .cancel:hover {
          background-color: #DADBDB;
        }

        .create {
          margin: 19px 20px 0 20px;
          width: 78px;
          height: 32px;
          background-color: #5590FF;
          border: 0;
          color: white;
        }

        .create:hover {
          background-color: #3C7FFF;
        }
      }
    }
  }

  .el-header {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    background-color: #FBFBFB;

    .left {
      display: flex;
      margin-top: 10px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      span {
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }
    }

    .right {
      display: flex;
      margin-top: 10px;
      padding-right: 40px;

      .el-input {
        margin-top: 3px;
      }

      .el-input, button {
        height: 28px;
      }

      button {
        width: 110px;
        height: 32px;
        background-color: #5590FF;
        color: white;
        border: 0;
        border-radius: 5px;
        cursor: pointer;
      }

      .el-input {
        border-radius: 20px;
        margin-right: 10px;
        width: 400px;
      }

      ::v-deep input::-webkit-input-placeholder {
        font-size: 3px;
      }
    }
  }

  .el-aside {
    height: 88vh;
    background-color: #FBFBFB;

    .box-card {
      margin: 10% auto;
      width: 215px;
      height: 91%;
      border-radius: 15px;

      .items {
        height: 32px;
        width: 100%;
        margin: 2px auto;
        display: flex;
        border-radius: 10px;

        div {
          line-height: 32px;
          font-size: 14px;
          color: #515968;
        }

        div:first-child {
          margin-right: 5px;
          padding-top: 3px;
          margin-left: 20px;
        }
      }

      .items:hover, .items-active {
        background-color: #E8E8E8;
        cursor: pointer;
      }

      img {
        width: 24px;
        height: 24px;
      }

      hr {
        background-color: #DCDCDC;
        height: 1px;
        border: none;
        margin-top: 430px;
      }

      .footer {

        .footer-items {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          color: #515968;

          .el-progress--line {
            width: 250px;
          }
        }
      }
    }
  }

  .el-main {
    background-color: #FBFBFB;
  }
}
</style>